<script setup lang="ts">
import list from '@/common/address.data.js'
import {onMounted, ref} from "vue";
import {reqSaveAddress, reqSelectById, reqModifyById} from "@/api/user";
import {onLoad} from "@dcloudio/uni-app";

const show = ref(false)
const showRegionPicker = () => {
  show.value = true;
}
const id = ref()

onLoad(async (e: any) => {
  id.value = e.id
  if (e.id) {
    await reqSelectById(e.id).then((res: any) => {
      if (res.code == 200) {
        info.value.detail = res.data.detail
        info.value.name = res.data.name
        info.value.phone = res.data.phone
        isdf.value = res.data.isDefault == '1'
        address.value = res.data.province + res.data.city + res.data.country
        info.value.city = res.data.city
        info.value.province = res.data.province
        info.value.country = res.data.country
        info.value.id = e.id
      }
    })
  }
})

let info = ref({
  name: '',
  phone: '',
  province: '',
  city: '',
  country: '',
  detail: '',
  isDefault: '0',
  id: ''
})

const address = ref('')

let addressList = ref([list, list[0].children, list[0].children[0].children])

onMounted(() => {

})

const close = () => {
  show.value = false;
}

let oldList = ref([])

const changeHandler = (e) => {
  const {
    columnIndex,
    value,
    values,
    index,
    picker
  } = e;

  if (columnIndex === 0) {
    picker.setColumnValues(1, list[index].children);
    picker.setColumnValues(2, list[index].children[0].children);
    oldList.value = list[index].children
  }
  if (columnIndex === 1) {
    picker.setColumnValues(2, oldList.value[index].children);
  }
};

const confirm = (e) => {
  info.value.province = e.value[0].name
  info.value.city = e.value[1].name
  info.value.country = e.value[2].name
  address.value = e.value[0].name + e.value[1].name + e.value[2].name
  close()
};

let isdf = ref(true)

const setDefault = (value: any) => {
  if (value) {
    info.value.isDefault = "1"
  } else {
    info.value.isDefault = "0"
  }
}

const save = async () => {
  if (!info.value.name) {
    uni.showToast({
          title: '请输入姓名',
          icon: 'none'
        }
    )
  } else if (!info.value.phone || !uni.$u.test.mobile(info.value.phone)) {
    uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none'
        }
    )
  } else if (!address.value) {
    uni.showToast({
          title: '请选择地址',
          icon: 'none'
        }
    )
  } else if (!info.value.detail) {
    uni.showToast({
          title: '请输入详细信息',
          icon: 'none'
        }
    )
  } else {
    await reqModifyById(info.value).then((res: any) => {
      if (res.code == 200) {
        uni.showToast({
          title: '修改成功',
          icon: 'none'
        })
        setTimeout(() => {
          uni.navigateBack()
        }, 1000)
      }
    })
  }
}

const insert = async () => {
  if (!info.value.name) {
    uni.showToast({
          title: '请输入姓名',
          icon: 'none'
        }
    )
  } else if (!info.value.phone || !uni.$u.test.mobile(info.value.phone)) {
    uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none'
        }
    )
  } else if (!address.value) {
    uni.showToast({
          title: '请选择地址',
          icon: 'none'
        }
    )
  } else if (!info.value.detail) {
    uni.showToast({
          title: '请输入详细信息',
          icon: 'none'
        }
    )
  } else {
    await reqSaveAddress(info.value).then((res) => {
      if (res.code == 200) {
        uni.showToast({
          title: '保存成功',
          icon: 'none'
        })
        setTimeout(() => {
          uni.navigateBack({
            delta: 1
          })
        }, 1000)
      }
    })
  }
}

const back = () => {
  uni.redirectTo({
    url: '/pages/user/setting/address/address'
  })
}
</script>
<template>
  <view class="bar"></view>

  <view>
    <u-navbar
        @leftClick="back()"
        title="新增收货地址"
        :autoBack="true"
        :placeholder="true"
    >
    </u-navbar>
    <view class="wrap">
      <view class="top">
        <view class="item">
          <view class="left">收货人</view>
          <u-input type="text" border="none" v-model="info.name" placeholder="请填写收货人姓名"/>
        </view>
        <view class="item">
          <view class="left">手机号码</view>
          <u-input type="text" border="none" v-model="info.phone" placeholder="请填写收货人手机号"/>
        </view>
        <view class="item" @tap="showRegionPicker">
          <view class="left">所在地区</view>
          <input border="none" disabled v-model="address" placeholder="请选择所在地区"/>
        </view>
        <view class="item">
          <view class="left">详细地址</view>
          <u-textarea v-model="info.detail" placeholder="街道、楼牌等" height="30" border="none"></u-textarea>
        </view>
      </view>
      <view class="bottom">
        <view class="default">
          <view class="left">
            <view class="set">设置默认地址</view>
            <view class="tips">提醒：每次下单会默认使用该地址</view>
          </view>
          <view class="right">
            <u-switch color="#FF9E29" style="margin: 15rpx" active-color="#FF9E29" v-model="isdf" @change="setDefault"/>
          </view>
        </view>
      </view>

      <u-button v-if="id" color="#FF9E29"
                style="margin-top: 55rpx;width: 95vw;position: absolute;bottom: 20rpx;left: 15rpx"
                :hairline="false"
                text="保存" @click="save()"></u-button>

      <u-button v-else color="#FF9E29"
                style="margin-top: 55rpx;width: 95vw;position: absolute;bottom: 20rpx;left: 15rpx"
                :hairline="false"
                text="新增" @click="insert()"></u-button>

      <u-picker ref="uPicker" :columns="addressList" :defaultIndex="[0,0,0]" keyName="name" :show="show"
                @confirm="confirm" @close="close()" @cancel="close()" @change="changeHandler"
                :closeOnClickOverlay="true"></u-picker>
    </view>
  </view>
</template>

<style lang="scss" scoped>

.wrap {
  background-color: #f2f2f2;

  .top {
    background-color: #ffffff;
    border-top: solid 2rpx $u-border-color;
    padding: 22rpx;

    .item {
      display: flex;
      font-size: 32rpx;
      line-height: 100rpx;
      align-items: center;
      border-bottom: solid 2rpx $u-border-color;

      .left {
        width: 180rpx;
      }

      input {
        text-align: left;
      }
    }

    .address {
      padding: 20rpx 0;

      textarea {
        // width: 100%;
        height: 150rpx;
        background-color: #f7f7f7;
        line-height: 60rpx;
        margin: 40rpx auto;
        padding: 20rpx;
      }
    }

    .site-clipboard {
      padding-right: 40rpx;

      textarea {
        // width: 100%;
        height: 150rpx;
        background-color: #f7f7f7;
        line-height: 60rpx;
        margin: 40rpx auto;
        padding: 20rpx;
      }

      .clipboard {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 26rpx;
        color: $u-tips-color;
        height: 80rpx;

        .icon {
          margin-top: 6rpx;
          margin-left: 10rpx;
        }
      }
    }
  }

  .bottom {
    margin-top: 20rpx;
    padding: 40rpx;
    padding-right: 0;
    background-color: #ffffff;
    font-size: 28rpx;

    .tag {
      display: flex;

      .left {
        width: 160rpx;
      }

      .right {
        display: flex;
        flex-wrap: wrap;

        .tags {
          width: 140rpx;
          padding: 16rpx 8rpx;
          border: solid 2rpx $u-border-color;
          text-align: center;
          border-radius: 50rpx;
          margin: 0 10rpx 20rpx;
          display: flex;
          font-size: 28rpx;
          align-items: center;
          justify-content: center;
          color: $u-content-color;
          line-height: 1;
        }

        .plus {
          //padding: 10rpx 0;
        }
      }
    }

    .default {
      margin-top: 50rpx;
      display: flex;
      justify-content: space-between;
      border-bottom: solid 2rpx $u-border-color;
      line-height: 64rpx;

      .tips {
        font-size: 24rpx;
      }

      .right {
      }
    }
  }
}
</style>
